<template>
  <div class="image-box">
    <n-space vertical align="center">
      <n-space>
        <n-input
          style="min-width: 400px"
          autosize
          v-model:value="imagePrompt"
          :disabled="getImageLoading"
          placeholder="请输入描述"
          clearable
          show-count
          maxlength="100"
        />
        <n-button type="primary" @click="handleToGetImage" :loading="getImageLoading">
          生成图片
        </n-button>
      </n-space>
      <div class="img-box">
        <n-skeleton
          v-if="!imageSrc"
          :width="500"
          :height="500"
          :sharp="false"
          size="medium"
        />
        <n-image lazy v-else width="500" :src="imageSrc" />
      </div>
    </n-space>
  </div>
</template>
<script lang="ts" setup>
import { getImage } from '@/api/home'
const imagePrompt = ref('')
const imageSrc = ref('')
const getImageLoading = ref(false)
// 获取图片
const handleToGetImage = async () => {
  try {
    if (!imagePrompt.value) {
      return (window as any).$message.error('请输入描述!')
    } else {
      imageSrc.value = ''
      getImageLoading.value = true
      const res = await getImage({ query: imagePrompt.value })
      imageSrc.value = res.data
      getImageLoading.value = false
    }
  } catch (error) {
    getImageLoading.value = false
  }
}
</script>
<style lang="scss" scoped>
.image-box {
  padding: 20px 0;
  position: relative;
  height: calc(100vh - 150px);

  .img-box {
    margin-top: 50px;
    height: 500px;
    widows: 500px;
  }
}
</style>